<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-09-30 09:46:48
 * @LastEditTime: 2023-10-06 21:33:00
 * @LastEditors: ''
-->
<template>
  <!-- <div>
    <div v-for="n in 100" :key="n" :id="n" style="height: 50px;background: #2d8cf0;margin: 20px">
      {{ n }}
    </div>
    <div style="position: absolute;top: 10px;right: 10px">
      <e-anchor show-ink :scrollOffset="20" affix :bounds="500" container=".router-content">
        <e-anchor-link v-for="n in arr" :key="n.id" :href="'#' + n.index" :title="'title' + n.index" />
      </e-anchor>
    </div>
  </div> -->

  <div style="position:relative">
    <!-- <div class="demo-inner-divider"> -->
    <h2 id="basic_usage">
      <a href="#basic_usage" rel="noopener noreferrer">基础用法</a>
    </h2>
    <!-- </div> -->
    <div style="position:absolute;right:100px">
      <e-anchor show-ink @on-select="onSelect" @on-change="onChange" container=".router-content" :scrollOffset="20">
        <e-anchor-link href="#basic_usage" title="Basic Usage" />
        <e-anchor-link href="#static_position" title="Static Position" />
        <e-anchor-link href="#API" title="API">
          <e-anchor-link href="#Anchor_props" title="Anchor props" />
          <e-anchor-link href="#Anchor_events" title="Anchor events" />
          <e-anchor-link href="#AnchorLink_props" title="AnchorLink props" />
        </e-anchor-link>
      </e-anchor>
    </div>



    <h2 id="static_position" style="marginTop:200px">
      <a href="#static_position">静态位置</a>
    </h2>
    <p>不浮动，状态不随页面滚动变化。</p>

    <div style="position:absolute;right:250px">
      <e-anchor :affix="false" show-ink>
        <e-anchor-link href="#basic_usage" title="Basic Usage" />
        <e-anchor-link href="#static_position" title="Static Position" />
        <e-anchor-link href="#API" title="API">
          <e-anchor-link href="#Anchor_props" title="Anchor props" />
          <e-anchor-link href="#Anchor_events" title="Anchor events" />
          <e-anchor-link href="#AnchorLink_props" title="AnchorLink props" />
        
        </e-anchor-link>
      </e-anchor>
    </div>

    <anchorMd class="markdown-body"></anchorMd>
    <div style="margin-bottom:800px"></div>
  </div>

</template>

<script setup>
import {ref} from "vue"
import anchorMd from "../../docs/anchor.md"


const arr =ref([]);
for (let i = 0; i < 100; i++) {
  arr.value.push({
    id: Math.random(),
    index: i + 1
  });
}

const onSelect=(href)=>{
  console.log('onSelect',href)
}

const onChange=(newHref,oldHref)=>{
  console.log('onChange',newHref,oldHref)
}
</script>
